<template>
    <div class="wp" :class="{'fullPage-warp-full':isFull,'wp-shop':pageShow}" @click="hide">
        <div ref="wpinner" v-if="dom">
            <div class="page-warp" v-for="(img,n) in imgArr" :key="img+n"><img :src="img"></div>
        </div>
        <div class="spot-warp">
            <i v-for="i in n" :key="i" :class="{'selec':i==now}"></i>
        </div>
    </div>
</template>
<script>
import Full from './showimg.js';
/**
 * 功能 实现根据容器大小，图片居中轮播或者全屏，图片居中轮播
 * 参数说明
 *imgs array 需要轮播的数片的src
 *loop 是否无限循环
 *start 初始化时显示某张图片默认第一张（0开始）
 *isFull 是否全屏，默认true,如果为false,则以容器的大小来轮播
 *几个常用方法 hide(),show(),moveTo()分别为显示隐藏轮播（isFull为true时有效），及移动到第几张图片
 *
 * @Author: lizuping
 * @Date: 2018-00-00
 * @Last Modified by: lizuping
 * @Last Modified time: 2018-07-31 16:20:46
 */
// 组件模块
export default {
    name: 'showImg',
    data () {
        return {
            pageShow: !this.isFull,
            dom: true,
            imgArr: [],
            n: 0,
            now: 1,
            full: false
        };
    },
    // 数据接口 type:String Number Boolean Function Object Array Symbol
    props: {
        imgs: {
            type: Array,
            default () {
                return [12];
            }
        },
        isFull: {
            type: Boolean,
            default () {
                return true;
            }
        },
        loop: {
            type: Boolean,
            default () {
                return false;
            }
        },
        start: {
            type: Number,
            default () {
                return 0;
            }
        }
    },
    // 计算属性
    computed: {},
    // 数据监控
    watch: {
        imgs () {
            this.dom = false;
            this.imgArr = this.imgs;
            this.n = this.imgs.length;
            this.$nextTick(function () {
                this.dom = true;
                this.$nextTick(function () {
                    this.fullpage();
                });
            });
        }

    },
    // 方法属性
    methods: {
        hide () {
            if (this.isFull) {
                this.pageShow = false;
            }
        },
        show () {
            if (this.isFull) {
                this.pageShow = true;
            }
        },
        moveTo (n) {
            this.full.moveTo(n);
        },
        fullpage () {
            var that = this;
            this.full = new Full(that.$refs.wpinner, {drag: true,
                loop: that.loop,
                dir: 'h',
                start: that.start,
                afterChange: function (e) {
                    that.now = that.loop ? e.cur : e.cur + 1;
                }});
        }
    },
    // 组件创建勾子只执行一次
    created () {
        this.imgArr = this.imgs;
        this.n = this.imgArr.length;
    },
    // 组件渲染完成勾子只执行一次
    mounted () {
        this.fullpage();
    }
};
</script>
<style>
.wp {
    position: relative;
    height: 3rem;
    width: 100%;
    overflow: hidden;
}
.fullPage-warp-full {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: scale(0.9);
    transition: ease z-index 360ms,ease opacity 360ms,ease transform 360ms;
}
.wp.wp-shop{opacity: 1;z-index: 99999;transform: scale(1);}
.fullPage-wp {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.fullPage-wp.anim {
    -webkit-transition: all 500ms ease-out 0s;
    transition: all 500ms ease-out 0s;
}
.fullPage-page {
    display: block;
    overflow: hidden;
}

.fullPage-dir-h {
    float: left;
}
.page-warp {
    position: relative;
}
.page-warp img {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translate3d(0, -50%, 0);
}
.spot-warp {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0.2rem;
    text-align: center;
    height: 0.2rem;
    line-height: 0.2rem;
}
.spot-warp i {
    display: inline-block;
    width: 0.14rem;
    height: 0.14rem;
    border: 1px solid #eee;
    border-radius: 0.1rem;
    margin: 0 0.06rem;
    opacity: 0.8;
}
.spot-warp .selec {
    background-color: #eee;
}
</style>
